<template>
  <view class="container">
    <!-- 地图容器 -->
	
    <map 
	style="width: 100vh;height: 43.5vh;"
      id="agvMap"
      class="map-container"
      :latitude="latitude"
      :longitude="longitude"
      :scale="20"
      :markers="markers"
      show-location
      show-compass
    >
      <cover-view class="map-toolbar">
        <button class="btn" @click="centerMap">
          <uni-icons type="location" size="24" color="#666" />
        </button>
      </cover-view>
    </map>

    <!-- 控制面板 -->
    <view class="control-panel">
      <!-- 状态指示 -->
      <view class="status-indicator">
        <view :class="['led', status]" />
        <text class="status-text">{{ statusText[status] }}</text>
      </view>

      <!-- 扩展控制按钮 -->
      <view class="extra-controls">
        <button class="btn mode" @click="showModePicker">
          <uni-icons type="gear" size="32" color="#fff" />
          <text>模式：{{ modeText }}</text>
        </button>
        <button class="btn suction" @click="adjustSuction">
          <uni-icons type="sound" size="32" color="#fff" />
          <text>吸力：{{ suctionLevel }}档</text>
        </button>
      </view>

      <!-- 方向控制 -->
   <view class="direction-pad">
         <view class="row">
           <button class="btn up" @click="move('up')">
             <uni-icons type="arrow-up" size="36" color="#fff" />
           </button>
         </view>
         <view class="row middle">
           <button class="btn left" @click="move('left')">
             <uni-icons type="arrow-left" size="36" color="#fff" />
           </button>
           <view class="spacer"></view>
           <button class="btn right" @click="move('right')">
             <uni-icons type="arrow-right" size="36" color="#fff" />
           </button>
         </view>
         <view class="row">
           <button class="btn down" @click="move('down')">
             <uni-icons type="arrow-down" size="36" color="#fff" />
           </button>
         </view>
       </view>
    </view>

    <!-- 模式选择弹出层 -->
<!--    <uni-popup ref="modePopup" type="bottom">
      <view class="mode-picker">
        <text class="title">选择工作模式</text>
        <button 
          v-for="mode in modes" 
          :key="mode.value"
          :class="['mode-btn', {active: currentMode === mode.value}]"
          @click="selectMode(mode.value)"
        >
          {{ mode.label }}
        </button>
      </view>
    </uni-popup> -->
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
// import mqtt from 'mqtt/dist/mqtt'
const modeText =ref('自动')
// 地图配置
const latitude = ref(31.2304)   // 初始纬度（示例上海坐标）
const longitude = ref(121.4737) // 初始经度
const scale = ref(20)
const markers = ref([{
  id: 1,
  latitude: latitude.value,
  longitude: longitude.value,
  iconPath: '/static/position.png',
  width: 40,
  height: 40,
  rotation: 0,
  callout: {
    content: 'AGV-001',
    color: '#fff',
    bgColor: '#409EFF',
    padding: 8,
    borderRadius: 4
  }
}])

// MQTT配置
const client = ref(null)
const mqttConfig = reactive({
  protocol: 'ws',
  host: 'broker.emqx.io',
  port: 8083,
  clientId: `agv_${Date.now()}`,
  topic: {
    status: 'agv/001/status',
    control: 'agv/001/control',
    position: 'agv/001/position'
  }
})

// 设备状态
const status = ref('cleaning')
const statusText = {
  idle: '待机',
  cleaning: '清扫中',
  returning: '返回充电',
  error: '故障'
}

// 工作模式
const modes = [
  { value: 'auto', label: '自动清扫' },
  { value: 'spot', label: '定点清扫' },
  { value: 'edge', label: '沿边清扫' }
]
const currentMode = ref('auto')

// 初始化MQTT
const initMQTT = () => {
  client.value = mqtt.connect({
    protocol: mqttConfig.protocol,
    host: mqttConfig.host,
    port: mqttConfig.port,
    clientId: mqttConfig.clientId
  })

  client.value.on('connect', () => {
    console.log('MQTT connected')
    client.value.subscribe(mqttConfig.topic.status)
    client.value.subscribe(mqttConfig.topic.position)
  })

  client.value.on('message', (topic, payload) => {
    const data = JSON.parse(payload.toString())
    switch(topic) {
      case mqttConfig.topic.position:
        updatePosition(data)
        break
      case mqttConfig.topic.status:
        updateStatus(data)
        break
    }
  })
}

// 更新位置
const updatePosition = (data) => {
  latitude.value = data.lat
  longitude.value = data.lng
  markers.value[0].rotation = data.direction
  // 添加轨迹动画
  uni.createMapContext('agvMap').translateMarker({
    markerId: 1,
    destination: {
      latitude: data.lat,
      longitude: data.lng
    },
    duration: 1000,
    animationEnd: () => {}
  })
}

// 发送控制指令
const sendCommand = (command) => {
  const message = JSON.stringify({
    timestamp: Date.now(),
    ...command
  })
  client.value.publish(mqttConfig.topic.control, message)
}

// 模式选择
const selectMode = (mode) => {
  currentMode.value = mode
  // sendCommand({ type: 'mode', value: mode })
  uni.vibrateShort() // 震动反馈
  this.$refs.modePopup.close()
}

// 吸力调节
const suctionLevel = ref(2)
const adjustSuction = () => {
  suctionLevel.value = suctionLevel.value % 3 + 1
  sendCommand({ type: 'suction', value: suctionLevel.value })
}

// 生命周期
onMounted(() => {
  // initMQTT()
})
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  // height: 100vh;
}

.map-container {
  // flex: 1;
  width: 100%;
  height: 43.5vh;
}

.map-toolbar {
  position: absolute;
  right: 20rpx;
  bottom: 40rpx;
  .btn {
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  }
}

.control-panel {
  background: #fff;
  padding: 32rpx;
  box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.05);
  
  .status-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
    .led {
      width: 24rpx;
      height: 24rpx;
      border-radius: 50%;
      margin-right: 16rpx;
      &.idle { background: #909399; }
      &.cleaning { background: #67C23A; animation: pulse 1.5s infinite; }
      &.returning { background: #409EFF; }
      &.error { background: #F56C6C; }
    }
  }
}

.extra-controls {
  display: flex;
  gap: 32rpx;
  margin-bottom: 48rpx;
  
  .btn {
    flex: 1;
    height: 100rpx;
    border-radius: 16rpx;
    background: #409EFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    
    text {
      margin-left: 16rpx;
      font-size: 28rpx;
    }
  }
}

.mode-picker {
  background: #fff;
  padding: 48rpx;
  border-radius: 32rpx 32rpx 0 0;
  
  .title {
    display: block;
    text-align: center;
    font-size: 32rpx;
    margin-bottom: 48rpx;
  }
  
  .mode-btn {
    margin: 24rpx 0;
    background: #f8f8f8;
    color: #666;
    
    &.active {
      background: #409EFF;
      color: #fff;
    }
  }
}
.direction-pad {
  background: rgba(255,255,255,0.9);
  border-radius: 48rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);

  .row {
    display: flex;
    justify-content: center;
    gap: 32rpx;
    margin: 16rpx 0;

    &.middle {
      margin: 32rpx 0;
    }
  }

  .btn {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    
    &.up { background: #4cd964; }
    &.down { background: #FF9500; }
    &.left, &.right { background: #6B73FF; }

    &:active {
      transform: scale(0.95);
      box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.2);
    }

    &.active {
      transform: scale(0.9);
      opacity: 0.8;
    }
  }
}

.action-buttons {
  margin-top: 48rpx;
  display: flex;
  justify-content: center;
  gap: 48rpx;

  .btn {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    
    &.emergency {
      background: linear-gradient(145deg, #ff3b30, #ff9500);
    }
    
    &.reset {
      background: linear-gradient(145deg, #6B73FF, #409EFF);
    }
  }
}


@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 0.3; }
  100% { opacity: 0.8; }
}
</style>